import React, { useState, useEffect } from "react";
import { useNavigate, useSearchParams, useParams } from "react-router-dom";
import { NavBar, Collapse } from "antd-mobile";
import { AntOutline } from "antd-mobile-icons";
import NavDate from "../../components/NavDate";
import http from "../../api/http";
import dayjs from "dayjs";
import styles from "./deatil.module.css";

function Index() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [sp, setSp] = useSearchParams();
  const start = sp.get("start");
  const end = sp.get("end");
  const [infor, setInfor] = useState({});

  const dayLeft = dayjs(sp.get("date")).format("M月D日 ddd");
  const dayright = dayjs(sp.get("date")).add(1, "day").format("M月D日 ddd");

  //获取详情数据
  const FeachGetInfor = async () => {
    const res = await http.get(`/xx/trip/train/${id}`, {
      params: { start, end },
    });
    setInfor(res.data.data);
  };

  useEffect(() => {
    FeachGetInfor();
  }, []);

  const handelBack = () => {
    navigate(-1);
  };

  if (!infor.id) {
    return <div>暂无数据</div>;
  }

  return (
    <div>
      <NavBar onBack={() => handelBack()}>车次详情</NavBar>
      <NavDate date={sp.get("date")} />
      <div className={styles.inforWrap}>
        <span>{infor.startStation}</span>
        <span>{infor.trainNo}</span>
        <span>{infor.endStation}</span>

        <span>{infor.startTime}</span>
        <span>
          <AntOutline fontSize={36} color="skyblue" />
        </span>
        <span>{infor.endTime}</span>

        <span>{dayLeft}</span>
        <span>耗时 {infor.timeTaken}</span>
        <span>{infor.isNextDay ? dayright : dayLeft}</span>
      </div>
      <div>
        <Collapse accordion></Collapse>
      </div>
    </div>
  );
}

export default Index;
